<template>
  <div class="shareContainer" ref="shareContainer">
    <!-- <div class="shareheader">
      <div class="shareheader_top">
        <div style="min-width:260px;margin: 5px 10px 18px 0px;">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">路由名称</span>
          <el-input v-model="queryparam.name" placeholder="请输入路由名称" style="width: 210px; padding: 0px 8px 0px 0px">
          </el-input>
        </div>
        <div style="min-width:100px;margin: 5px 10px 18px 0px;">
          <el-button type="primary" data-tracker="P30-1" @click="PagerouterList()" icon="el-icon-search">查询</el-button>
          <el-button type="primary" data-tracker="P30-2" @click="resetquery()" plain icon="el-icon-refresh-left">重置</el-button>
        </div>

      </div>
    </div> -->
    <div class="sharecontent">
      <!-- 头部内容 -->
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            v-permission="'company_router_create'"
            type="primary"
            data-tracker="P30-3"
            @click="handleClick()"
            plain
            style="margin: 0px 10px 10px 0px"
            >新增</el-button
          >
          <el-button
            v-permission="'company_router_delete'"
            type="primary"
            data-tracker="P30-4"
            @click="PageDeleteRouter()"
            plain
            style="margin: 0px 10px 10px 0px"
            >删除</el-button
          >
        </div>
        <div style="display: flex">
          <div>
            <el-button
              type="primary"
              size="mini"
              @click="resetquery"
              style="margin: 0px 10px 0px 0px"
              >重置</el-button
            >
          </div>
          <div>
            <SettinUp
              :settype="36"
              :objSettinUpdata="objSettinUp"
              key="3"
            ></SettinUp>
          </div>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="sharecontent_content">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
          particulars="finance_invoice_book_list"
          redact="finance_invoice_book_update"
        >
        </TableHeader>
        <!-- <el-table
          ref="multipleTable"
          :max-height="maxheight"
          :data="tableData"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" fixed width="55"> </el-table-column>
          <el-table-column type="index" fixed label="序号" width="55"></el-table-column>
          <el-table-column fixed prop="name" label="路由名称" width="150">
          </el-table-column>
          <el-table-column prop="transportation_type" label="运输类型" width="200">
          </el-table-column>
          <el-table-column prop="origin_level" label="始发地层级" width="200">
          </el-table-column>
          <el-table-column prop="origin_city" label="始发地地址" width="320">
          </el-table-column>
          <el-table-column prop="dest_level" label="目的地层级" width="200">
          </el-table-column>
          <el-table-column prop="dest_city" label="目的地地址" width="320">
          </el-table-column>
          <el-table-column prop="status" label="是否启用" width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-permission="'company_router_detail'" @click="handleClick(scope.row, '1')" data-tracker="P30-5" type="text" size="small">查看</el-button>
              <el-button v-permission="'company_router_update'" type="text" size="small" data-tracker="P30-6" @click="handleClick(scope.row, '2')">修改</el-button>
            </template>
          </el-table-column>
        </el-table> -->
      </div>
      <div class="sharecontent_header_left">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryparam.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryparam.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 弹框内容 -->
      <div>
        <el-dialog
          :title="title_name"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="63%"
        >
          <div>
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="120px"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
            >
              <el-form-item label="路由名称" prop="name">
                <el-input
                  placeholder="路由名称"
                  v-model="ruleForm.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="运输类型" prop="transportation_type">
                <el-select
                  v-model="ruleForm.transportation_type"
                  placeholder="请选择"
                  style="width: 172px"
                >
                  <el-option
                    v-for="item in typeofoption"
                    :key="item.item_code"
                    :label="item.item_name"
                    :value="item.item_code"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="始发地层级" prop="origin_level">
                <el-select
                  v-model="ruleForm.origin_level"
                  placeholder="请选择"
                  style="width: 172px"
                >
                  <el-option
                    v-for="item in Beginninglevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="始发地" prop="startList">
                <el-cascader
                  v-model="ruleForm.startList"
                  :options="cityList"
                  :props="{
                    value: 'id',
                    label: 'name',
                    children: 'next_level_data',
                    checkStrictly: 'ture',
                  }"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="始发地详细地址">
                <el-input
                  v-model="ruleForm.origin_address"
                  placeholder="始发地详细地址"
                  style="width: 210px; padding: 0px 8px 0px 0px"
                ></el-input>
              </el-form-item>
              <el-form-item label="目的地层级" prop="dest_level">
                <el-select
                  v-model="ruleForm.dest_level"
                  placeholder="请选择"
                  style="width: 172px"
                >
                  <el-option
                    v-for="item in Beginninglevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="目的地" prop="gobalList">
                <el-cascader
                  v-model="ruleForm.gobalList"
                  :options="cityList"
                  :props="{
                    value: 'id',
                    label: 'name',
                    children: 'next_level_data',
                    checkStrictly: 'ture',
                  }"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="目的地详细地址">
                <el-input
                  v-model="ruleForm.dest_address"
                  placeholder="始发地详细地址"
                  style="width: 210px; padding: 0px 8px 0px 0px"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-switch
                  v-model="ruleForm.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="0"
                  inactive-value="1"
                >
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="120px"
            >
              <div v-for="(item, index) in childrenList" :key="index">
                <span>子路由信息:</span>
                <el-form-item label="途径地名称" prop="name">
                  <el-input
                    placeholder="途径地名称"
                    v-model="item.via_name"
                  ></el-input>
                </el-form-item>
                <el-form-item label="公里数">
                  <el-input
                    placeholder="公里数"
                    v-model.number="item.via_order"
                  ></el-input>
                </el-form-item>
                <el-button
                  v-if="childrenList.length > '1'"
                  type="primary"
                  icon="el-icon-minus"
                  circle
                  @click="startoff(index)"
                >
                </el-button>
              </div>
            </el-form>
            <el-button
              type="primary"
              icon="el-icon-plus"
              circle
              @click="Addmessage()"
            ></el-button>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              :data-tracker="orderstate == '0' ? 'P30-8' : 'P30-10'"
              @click="dialogVisible = false"
              >取 消</el-button
            >
            <!-- 代表创建的确定 -->
            <el-button
              type="primary"
              data-tracker="P30-7"
              @click="PageAddRouter('ruleForm')"
              v-if="orderstate == '0'"
              >确 定
            </el-button>
            <!-- 修改的确定 -->
            <el-button
              type="primary"
              data-tracker="P30-9"
              @click="PageEditRouter('ruleForm')"
              v-if="orderstate == '2'"
              >确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
import {
  routerList,
  EditRouter,
  DetailsRouter,
  DeleteRouter,
  AddRouter,
} from "@/api/information";
import { regionList, dictionanryList } from "../common/common";
export default {
  components: { TableHeader, SettinUp },
  data() {
    return {
      title_name: "路由",
      ruleForm: {
        name: "", //名称
        transportation_type: "", //运输类型
        origin_level: "", //始发地层级
        origin_province_id: "", //始发地省
        origin_city_id: "", //始发地市
        origin_district_id: "", // 始发地区
        origin_address: "", // 始发地详细地址
        dest_level: "", // 目的地层级
        dest_province_id: "", // 目的地省
        dest_city_id: "", // 目的地市
        dest_district_id: "", // 目的地区
        dest_address: "", // 目的地详细地址
        status: "0", //状态
        via_place: [], // 途径地信息
        startList: [], //始发地列表
        gobalList: [], //目的地列表
      },
      rules: {
        name: [{ required: true, message: "名称", trigger: "blur" }],
        transportation_type: [
          { required: true, message: "运输类型", trigger: "blur" },
        ],
        origin_level: [
          { required: true, message: "始发地层级", trigger: "blur" },
        ],
        startList: [{ required: true, message: "始发地", trigger: "blur" }],
        dest_level: [
          { required: true, message: "目的地层级", trigger: "blur" },
        ],
        gobalList: [{ required: true, message: "目的地", trigger: "blur" }],
      },
      childrenList: [
        {
          via_name: "", // 途径地名称
          via_order: "", //公里数
        },
      ],
      queryparam: {
        page: 1, //
        page_size: 20, //
      },
      tableData: [], //数据列表
      total: 0, //总条数
      currentPage4: 1,
      dialogVisible: false, //判断弹框显示隐藏
      typeofoption: [],
      Beginninglevel: [
        {
          value: "0",
          label: "省",
        },
        {
          value: "1",
          label: "市",
        },
        {
          value: "2",
          label: "区",
        },
        {
          value: "3",
          label: "地址",
        },
      ],
      cityList: [], //城市列表
      orderstate: "", //新增状态0 编辑状态2
      consignerID: "", //发货人的ID
      deletparam: {
        id: [], //多选删的id
      },
      maxheight: 400,
      // ==========
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      totalPage: 0,
      operation_type: 1,
    };
  },
  mounted() {
    // 地址管理
    this.provincectiy();
    // 数据列表
    this.PagerouterList();
    // 数据字典
    this.Datadictionary();
  },
  methods: {
    // 数据字典接口
    Datadictionary() {
      var param = [
        "transportationt", //运输类型
      ];
      dictionanryList(param).then((res) => {
        var res = res.data;
        ////运输类型
        this.typeofoption = res.list.transportationt;
      });
    },
    // 处理数据
    Datarouter(val) {
      var DataList = [];
      for (var i = 0; i < val.length; i++) {
        var origin_level_name = "";
        switch (val[i].origin_level) {
          case "0":
            origin_level_name = "省";
            break;
          case "1":
            origin_level_name = "市";
            break;
          case "2":
            origin_level_name = "区";
            break;
          case "3":
            origin_level_name = "地址";
            break;
        }
        var dest_level_list = "";
        switch (val[i].dest_level) {
          case "0":
            dest_level_list = "省";
            break;
          case "1":
            dest_level_list = "市";
            break;
          case "2":
            dest_level_list = "区";
            break;
          case "3":
            dest_level_list = "地址";
            break;
        }
        DataList.push({
          id: val[i].id,
          name: val[i].name,
          transportation_type:
            val[i].transportation_type == 0 ? "零担" : "整车",
          status: val[i].status == 0 ? "启用" : "禁用",
          origin_level: origin_level_name,
          dest_level: dest_level_list,
          origin_city:
            val[i].origin_province_name +
            "/" +
            val[i].origin_city_name +
            "/" +
            val[i].origin_district_name,
          dest_city:
            val[i].dest_province_name +
            "/" +
            val[i].dest_city_name +
            "/" +
            val[i].dest_district_name,
        });
      }
      this.tableData = DataList;
    },
    // 分页功能
    handleSizeChange(val) {
      this.queryparam.page_size = val;
      //  数据列表接口
      this.PagerouterList();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.queryparam.page = val;
      //  数据列表接口
      this.PagerouterList();
    },
    // 减少
    startoff(val) {
      this.childrenList.splice(val, 1);
    },
    Addmessage() {
      this.childrenList.push({
        via_name: "", // 途径地名称
        via_order: "", //
      });
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.cityList = res.data;
      });
    },
    // 路由列表
    PagerouterList() {
      var param = {
        header_id: 36 + "",
        ...this.queryparam,
      };
      routerList(param).then((res) => {
        this.orders = res.data.list || [];
        this.orders.unshift({});
        this.header_data_list = this.orders;
        this.HeaderData = res.data.item_list;
        this.Fntransformation(this.HeaderData);
        this.total = res.data.pagination.total;
      });
    },
    // 获取id进行判断是查看还是修改新增
    handleClick(row, type) {
      if (row == undefined) {
        this.title_name = "创建路由";
        this.orderstate = "0";
        this.openpop();
        this.clearList();
      } else if (row != "" && type == 1) {
        this.title_name = "查看路由";
        // 将修改的状态赋值为空
        this.orderstate = "";
        this.PageDetailsRouter(row.id);
        this.openpop();
      } else if (row != "" && type == 2) {
        this.title_name = "修改路由";
        this.orderstate = "2";
        this.consignerID = row.id;
        this.PageDetailsRouter(row.id);
        this.openpop();
      }
    },
    // 编辑路由
    PageEditRouter(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = {
            id: this.consignerID,
            name: this.ruleForm.name, //名称
            transportation_type: String(this.ruleForm.transportation_type), //运输类型
            origin_level: String(this.ruleForm.origin_level), //始发地层级
            origin_province_id: String(this.ruleForm.startList[0]), //始发地省
            origin_city_id: String(this.ruleForm.startList[1]), //始发地市
            origin_district_id: String(this.ruleForm.startList[2]), // 始发地区
            origin_address: this.ruleForm.origin_address, // 始发地详细地址
            dest_level: String(this.ruleForm.dest_level), // 目的地层级
            dest_province_id: String(this.ruleForm.gobalList[0]), // 目的地省
            dest_city_id: String(this.ruleForm.gobalList[1]), // 目的地市
            dest_district_id: String(this.ruleForm.gobalList[2]), // 目的地区
            dest_address: this.ruleForm.dest_address, // 目的地详细地址
            status: this.ruleForm.status, //是否启用
            via_place: this.childrenList,
          };

          EditRouter(param).then((res) => {
            if (res.code == "10000") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.cancledata();
              this.PagerouterList();
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 路由详情
    PageDetailsRouter(id) {
      var param = {
        id: id,
      };
      DetailsRouter(param).then((res) => {
        var res = res.data;
        // 途径地名称
        var resvIa = res.via_place != null ? res.via_place : this.childrenList;
        // 渲染始发地址
        var start_List = [];
        if (
          res.origin_province_id != 0 &&
          res.origin_city_id != 0 &&
          res.origin_district_id != 0
        ) {
          start_List = [
            res.origin_province_id,
            res.origin_city_id,
            res.origin_district_id,
          ];
        } else if (res.origin_province_id != 0 && res.origin_city_id != 0) {
          start_List = [res.origin_province_id, res.origin_city_id];
        } else if (res.origin_province_id != 0) {
          start_List = [res.origin_province_id];
        } else {
          start_List = [];
        }

        // 渲染目的地址
        var gobal_List = [];
        if (
          res.dest_province_id != 0 &&
          res.dest_city_id != 0 &&
          res.dest_district_id != 0
        ) {
          gobal_List = [
            res.dest_province_id,
            res.dest_city_id,
            res.dest_district_id,
          ];
        } else if (res.dest_province_id != 0 && res.dest_city_id != 0) {
          gobal_List = [res.dest_province_id, res.dest_city_id];
        } else if (res.dest_province_id != 0) {
          gobal_List = [res.dest_province_id];
        } else {
          gobal_List = [];
        }
        this.ruleForm.name = res.name;
        this.ruleForm.transportation_type = res.transportation_type;
        this.ruleForm.origin_level = res.origin_level;
        this.ruleForm.startList = start_List;
        this.ruleForm.origin_address = res.origin_address;
        this.ruleForm.dest_level = res.dest_level;
        this.ruleForm.gobalList = gobal_List;
        this.ruleForm.dest_address = res.dest_address;
        this.ruleForm.status = res.status;
        this.childrenList = resvIa;
      });
    },
    // 获取多选删除的id号
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparam.id = deleid;
    },
    // 删除路由
    PageDeleteRouter() {
      var param = {
        id: this.waybillIdNums,
      };
      DeleteRouter(param).then((res) => {
        if (res.code == "10000") {
          this.$message({
            message: "删除成功",
            type: "success",
          });

          this.PagerouterList();
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 路由创建
    PageAddRouter(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 始发地省
          var origin_province_id =
            this.ruleForm.startList[0] != undefined
              ? this.ruleForm.startList[0]
              : 0;

          // 始发地市
          var origin_city_id =
            this.ruleForm.startList[1] != undefined
              ? this.ruleForm.startList[1]
              : 0;

          // 始发地区
          var origin_district_id =
            this.ruleForm.startList[2] != undefined
              ? this.ruleForm.startList[2]
              : 0;
          // 目的地省
          var dest_province_id =
            this.ruleForm.gobalList[0] != undefined
              ? this.ruleForm.gobalList[0]
              : 0;

          // 目的地市
          var dest_city_id =
            this.ruleForm.gobalList[1] != undefined
              ? this.ruleForm.gobalList[1]
              : 0;
          // 目的地区
          var dest_district_id =
            this.ruleForm.gobalList[2] != undefined
              ? this.ruleForm.gobalList[2]
              : 0;
          var param = {
            name: this.ruleForm.name, //名称
            transportation_type: String(this.ruleForm.transportation_type), //运输类型
            origin_level: String(this.ruleForm.origin_level), //始发地层级
            origin_province_id: String(origin_province_id), //始发地省
            origin_city_id: String(origin_city_id), //始发地市
            origin_district_id: String(origin_district_id), // 始发地区
            origin_address: this.ruleForm.origin_address, // 始发地详细地址
            dest_level: String(this.ruleForm.dest_level), // 目的地层级
            dest_province_id: String(dest_province_id), // 目的地省
            dest_city_id: String(dest_city_id), // 目的地市
            dest_district_id: String(dest_district_id), // 目的地区
            dest_address: this.ruleForm.dest_address, // 目的地详细地址
            status: this.ruleForm.status, //备注
            via_place: this.childrenList,
          };
          AddRouter(param).then((res) => {
            if (res.code == "10000") {
              this.$message({
                message: "创建路由成功",
                type: "success",
              });
              this.cancledata();
              this.PagerouterList();
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        }
      });
    },
    // 点击取消
    cancledata() {
      // 清空数据
      this.closepop();
      this.clearList();
    },
    // 关闭弹框的函数
    closepop() {
      this.dialogVisible = false;
    },
    openpop() {
      this.dialogVisible = true;
    },
    // 清除数据
    clearList() {
      this.ruleForm = {
        name: "", //名称
        transportation_type: "", //运输类型
        origin_level: "", //始发地层级
        origin_province_id: "", //始发地省
        origin_city_id: "", //始发地市
        origin_district_id: "", // 始发地区
        origin_address: "", // 始发地详细地址
        dest_level: "", // 目的地层级
        dest_province_id: "", // 目的地省
        dest_city_id: "", // 目的地市
        dest_district_id: "", // 目的地区
        dest_address: "", // 目的地详细地址
        status: "0", //状态
        via_place: [], // 途径地信息
      };
      this.childrenList = [
        {
          via_name: "", // 途径地名称
          via_order: "", //公里数
        },
      ];
    },
    // 重置数据
    resetquery() {
      // this.queryparam.name = "";
      // this.PagerouterList();
      this.$refs.TableHeaderList.childMethod();
    },
    // ===
    objheader(obj) {
      var data = {
        header_id: 36 + "",
        ...obj,
        ...this.queryparam,
      };
      this.obj_list = obj;
      routerList(data).then((res) => {
        this.header_data_list = res.data.list;
        if (res.code === 10000 && res.data.list !== null) {
          this.header_data_list.unshift({});
          this.total = res.data.pagination.total;
        } else {
          this.header_data_list = [{}];
          this.paginations.total = 0;
          this.orderslength = 0;
        }
      });
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      this.waybillIdNums = value;
    },
    handleClickDetail_second(val) {
      this.handleClick(val, "1");
    },
    handleClickEdit_second(val) {
      this.handleClick(val, "2");
    },
    objSettinUp() {
      this.PagerouterList();
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;

  .shareheader {
    background: white;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .sharecontent_header_left {
    display: flex;
    margin: 10px 0px 0px 0px;
    justify-content: flex-end;
  }
  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      display: flex;
      justify-content: space-between;
      /* .sharecontent_header_right {
          display: inline-block;
        } */
    }

    // 表单内容
    .sharecontent_content {
    }
  }
}
</style>